<template>
  <div class="goods-area">
    <div class="group-base">
      <div class="group-wrap">
        <div class="group-header">
          <div class="header_box">
            <div class="header_box_title">{{ title }}</div>
          </div>
          <div v-if="!isInventory">
            <div class="group_header_title">——仅剩{{ inventoryNumber }}份——</div>
          </div>
        </div>
        <div v-for="(item,index) in goodsList" :key="index">
          <div class="normal_base">
            <div class="step_wrap">
              <div class="normal_base-item">
                <div>
                  <div class="step_item step_item_default">
                    <div class="step_box">
                      <div class="step_box_content">
                        <div class="step_count">{{ item.constitute_number }}</div>
                        <div class="step_unit">人团</div>
                      </div>
                    </div>
                    <div class="step_info">
                      <div class="step_label">{{ item.welfare_name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="group_area" v-if="isShowKaituan">
      <div class="group-line1">
        <img :width="12" :height="47" src="@/assets/images/activity/group_line.png" alt="">
      </div>
      <div class="group-line2">
        <img :width="12" :height="47" src="@/assets/images/activity/group_line.png" alt="">
      </div>
      <img width="100%" height="100%" src="@/assets/images/activity/pintuan_yl.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsArea",
  props: {
    goodsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isShowKaituan: {
      type: Boolean,
      default: true
    },
    isInventory: {
      type: Boolean,
      default: true
    },
    inventoryNumber: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>

.goods-area {
  .group-base {
    z-index: 1;
    margin-top: 35px;

    .group-wrap {
      width: 345px;
      margin: 0 auto;
      margin-bottom: 15px;
      padding: 12px;
      background: #fff8ee;
      border-radius: 10px;
      box-sizing: border-box;
      border: 2px solid #ffb54f;
    }

    .group-header {
      margin-bottom: 20px;

      .header_box {
        width: 290px;
        height: 48px;
        background: linear-gradient(144deg, red, #ff6f00);
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        margin-top: -37px;
        margin-bottom: 10px;

        .header_box_title {
          font-size: 18px;
          font-weight: 700;
          color: #fff;
        }
      }
    }

    .group_header_title {
      text-align: center;
      color: #840000;
      font-size: 15px;
      font-weight: 700;
      margin: 20px 0;
    }

    .step_item_default {
      background: linear-gradient(90deg, #ffe7e9 50%, rgba(255, 231, 233, 0));
      padding: 0 8px 0 0;
      margin-left: 10px;
      margin-bottom: 20px;
    }

    .step_item {
      border-radius: 10px;
      display: flex;
      align-items: center;
      position: relative;
    }

    .step_box {
      width: 78px;
      height: 86px;
      position: relative;
    }

    .step_box_content {
      width: 100%;
      height: 100%;
      background: url("../../../../../../../assets/images/activity/step_box.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: relative;
      z-index: 1;
      padding: 7px 0;
      box-sizing: border-box;
    }

    .step_count {
      color: #e40f2d;
    }

    .step_unit {
      color: #e40f2d;
    }

    .step_info {
      padding-left: 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 86px;
      padding-bottom: 15px;
      box-sizing: border-box;
    }

    .step_label {
      font-size: 16px;
      color: #842600;
      font-weight: 700;
      display: -webkit-box;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .group_area {
    position: relative;
    padding: 0 10px 0 10px;
    .group-line1 {
      width: 10px;
      z-index: 2;
      position: absolute;
      top: -27px;
      left: 50px;
      right: 0;
      img {
        vertical-align: middle;
        border-style: none;
        max-width: 100%;
        overflow-clip-margin: content-box;
        overflow: clip;
      }
    }
    .group-line2 {
      width: 10px;
      z-index: 2;
      position: absolute;
      top: -27px;
      right: 50px;
      img {
        vertical-align: middle;
        border-style: none;
        max-width: 100%;
        overflow-clip-margin: content-box;
        overflow: clip;
      }
    }
  }

}
</style>
